<template>
  <!-- 使用transition组件 -->
  <button @click="show = true">显示|创建</button>
  <button @click="show = false">隐藏|移除</button>
  <Transition>
    <div v-if="show" style="width: 100px; height: 100px; background: red"></div>
  </Transition>
  <Transition name="h">
    <div v-if="show" style="background: red"></div>
  </Transition>
</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    const show = ref(true)
    return { show }
  }
}
</script>

<style scoped lang="less">
// 如果需要多个组动画，transition加上name属性  name="xxx"
// 其他6个类型写法：xxx-enter-from xxx-enter-active xxx-enter-to
// --------------  xxx-leave-from xxx-leave-active xxx-leave-to
// 进入 vue2.0  v-enter v-enter-active v-enter-to
// 进入 vue3.0  v-enter-from v-enter-active v-enter-to
.v-enter-from {
  opacity: 0;
}
.v-enter-active {
  transition: all 2s;
}
.v-enter-to {
  opacity: 1;
}
// 离开 vue2.0 v-leave v-leave-active v-leave-to
// 离开 vue3.0 v-leave-from v-leave-active v-leave-to
.v-leave-from {
  opacity: 1;
}
.v-leave-active {
  transition: all 2s;
}
.v-leave-to {
  opacity: 0;
}
// h 的动画
.h-enter-from {
  height: 0px;
}
.h-enter-active {
  transition: all 2s;
}
.h-enter-to {
  height: 100px;
}
.h-leave-from {
  height: 100px;
}
.h-leave-active {
  transition: all 2s;
}
.h-leave-to {
  height: 0px;
}
</style>
